<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/common/admin_templ_style.css"/>
    <link rel="stylesheet" type="text/css" href="../../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../api/css/jquery.colorpicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../theme_engine/lib/bootstrap/dist/css/bootstrap.min.css"/>

    <script src="../../api/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../../api/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../api/js/jquery.colorpicker.js"></script>
    <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- Bootstrap -->

    <script src="../../theme_engine/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AngularJs-->
    <script src="../../theme_engine/lib/angular/angular.min.js" type="text/javascript"></script>
    <script src="../../theme_engine/lib/angular-resource/angular-resource.min.js" type="text/javascript"></script>
    <script src="../../theme_engine/lib/angular-route/angular-route.min.js" type="text/javascript"></script>
    <script src="../../theme_engine/lib/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>


    <style type="text/css">
        body {
            background:none;
            height: 100%;
        }
        #theme-edit-form {
            /*height: calc(100% - 42px);*/
            width: 100%;
        }
        #theme-edit-form h2 {
            margin-bottom:20px;
        }
        #theme-edit-form h3.ui-accordion-header-active {
            color:#fff;
        }
        #theme-edit-form select {
            padding-left:0;
            white-space:nowrap;
        }
        #theme-edit-form input[type="file"]{
            width: 132px;
        }
        .theme-edit-block {
            width: 100%;
        }
        .ui-accordion .theme-edit-content {
            padding:0;
        }
        .theme-edit-content ul {
            padding: 20px 5px;
        }
        .theme-edit-content li label {
            font-size:11px;
            padding-right:10px;
            width:35%;
        }
        .theme-edit-content button.ui-state-default {
            background:none;
            border: none;
        }
        .theme-edit-content span.ui-button-text {
            padding: 0;
            font-style: inherit;
        }
        .hidden-field {
            margin: 5px 0;
        }
        .hidden-field input {
            width:60px;
        }
        .hidden-field select {
            width: 77px;
        }
        .hidden-field span.close {
            padding: 1px 5px;
            display:inline-block;
            background:#aed0ea;
            color: #fff;
            border-radius:3px;
            margin-left:5px;
        }
        .hidden-field span.close:hover {
            cursor:pointer;
            background: #4F7891;
        }

        form, .kpi-preview, .kpi-drill {
            border: 1px solid #9CD6E7;
            border-radius: 5px;
            box-shadow: 0 0 100px #AADCEA;
            margin: 0 auto;
            padding-bottom: 50px;
            width: 98%;
        }

            /* new*/
        .wrapper {
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>

    <script type="text/javascript">

        $(function () {
            $("#accordion").accordion();

            $(".hidden-field").hide();

            //Select show/hide option
            $("select#banner-font").bind('change', function(){
                var thisValue = $(this).val();
                if (thisValue != "")
                    $("."+thisValue).show();
            });

            $('span.close').on('click', function(){
                $(this).closest('.hidden-field').hide();
            });

            $('#font-color, #left-panel-bg-color').colorpicker(
                    {
                        parts:'full',
                        alpha:true,
                        showOn:'both',
                        buttonColorize:true,
                        showNoneButton:true,
                        color: '#0000ff'
                    });
        });

        $('#left-panel-bg-color').change(function() {
            alert( "Handler for .change() called." );
        });



        function changeStyle(targetDom, property, value)
        {
            $(targetDom).css(property, value);
        }

        var CENTER_AREA = "#mainArea";



        function WizardCtrl($scope, $http) {
            $scope.test = "FFFASS";
            $scope.todos = [
                {text:'learn angular', done:true},
                {text:'build an angular app', done:false}];

            $scope.addTodo = function() {
                $scope.todos.push({text:$scope.todoText, done:false});
                $scope.todoText = '';
            };

            $scope.remaining = function() {
                var count = 0;
                angular.forEach($scope.todos, function(todo) {
                    count += todo.done ? 0 : 1;
                });
                return count;
            }



            var URL = "mydata.json",
                URL2 = "getvarf4.xml",
                URL3 = "getdata.json",
                METHOD = "GET";


            $scope.loadData2 = function() {
                $http({method: METHOD, url: URL2})
                        .success(function (data) {
                            $scope.data = data;

                        })
                        .error(function (error) {
                            $scope.status = 'Unable to load query data: ' + error.message;
                            $scope.data = data;
                        });
            }

        $scope.loadData3 = function() {
                $http({method: METHOD, url: URL3})
                        .success(function (data) {
                            $scope.engineTree = data;
                            for(var x = 0; x < $scope.engineTree.length; x++)
                            {
                                var e = $("<ul><li><div class='bar'>bla</div></li></ul>");
                                var div = $('<div></div>').addClass('bar').text('bla');
                                var li = $('<li></li>').attr('id', '1234');
                                li.append(div);
                            }
                        })
                        .error(function (error) {
                            $scope.status = 'Unable to load query data: ' + error.message;
                            $scope.data = data;
                        });
            }

            $scope.loadData = function() {
                $http({method: METHOD, url: URL})
                        .success(function (data) {
                            $scope.engineTree = data.root;



                        })
                        .error(function (error) {
                            $scope.status = 'Unable to load query data: ' + error.message;
                            $scope.data = data;
                        });
            };

            $scope.engineTree = [];
        };



        var App = angular.module('App', ['ui.bootstrap']);
        App.controller('FetchCtrl', function($scope) {
                $scope.test = "AAVVBB";
            })
        .controller('AccordionDemoCtrl', function($scope) {
                    $scope.oneAtATime = true;

                    $scope.groups = [
                        {
                            title: 'Dynamic Group Header - 1',
                            content: 'Dynamic Group Body - 1'
                        },
                        {
                            title: 'Dynamic Group Header - 2',
                            content: 'Dynamic Group Body - 2'
                        }
                    ];

                    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

                    $scope.addItem = function() {
                        var newItemNo = $scope.items.length + 1;
                        $scope.items.push('Item ' + newItemNo);
                    };

                    $scope.status = {
                        isFirstOpen: true,
                        isFirstDisabled: false
                    };
                });



    </script>
</head>
<body>

<div ng-app="App">
 <div ng-controller="FetchCtrl">
     {{test }}
 </div>



    <div ng-controller="AccordionDemoCtrl">
        <p>
            <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
            <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
        </p>

        <label class="checkbox">
            <input type="checkbox" ng-model="oneAtATime">
            Open only one at a time
        </label>
        <accordion close-others="oneAtATime">
            <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                This content is straight in the template.
            </accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                {{group.content}}
            </accordion-group>
            <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
            </accordion-group>
            <accordion-group is-open="status.open">
                <accordion-heading>
                    I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                </accordion-heading>
                This is just some content to illustrate fancy headings.
            </accordion-group>
        </accordion>
    </div>


</div>



<div class="wrapper">
    <div class="col-lg-3" ng-controller="WizardCtrl">
        <button class="btn btn-primary" ng-click="loadData()">Load Data</button>
        <button class="btn btn-primary" ng-click="loadData2()">Load Data2</button>
        <button class="btn btn-primary" ng-click="loadData3()">Load Data3</button>
        <div class="tab-frame bi_admin_report_edit">
            <form method="post" METH_NAME="UPDATE" id="theme-edit-form">
                <div class="theme-edit-block" id="accordion">
                </div>
            </form>
        </div>
    </div>

    <div class="col-lg-9">
        <div id="mainArea">

        </div>
    </div>




</div>
</body>
</html>
